<template>
	<view class="marketing-form">
		<gyd-navbar back-color="#fff" :title="title"></gyd-navbar>

		<u-form class="form" labelPosition="left" :model="formData" :rules="rules" ref="formRef">
			<u-form-item class="form-item" label="活动名称" labelWidth="120" prop="car_num">
				<u-input v-model="formData.car_num" placeholder="请输入活动名称"></u-input>
			</u-form-item>
			<u-form-item class="form-item" label="指定产品" labelWidth="120" prop="car_num">
				<u-input v-model="formData.car_num" placeholder="请输入活动名称"></u-input>
			</u-form-item>
			<view class="upload-row">
				<view class="tips">活动封面：</view>
				<uni-file-picker v-model="imageList" file-mediatype="image" mode="grid" :image-styles="imageStyles"
					:file-extname="extname" :auto-upload="false" custom-btn :limit="1" @select="selectFile($event, 6)"
					@delete="removeOk($event, 6)">
					<view class="custom-upload" slot="addBtn">
						<uni-icons type="camera-filled" size="52" color="#999"></uni-icons>
						<!-- <text class="label">图片上传</text> -->
					</view>
				</uni-file-picker>
			</view>
			<u-form-item class="form-item" label="目标人数" labelWidth="120" prop="car_num">
				<u-input v-model="formData.car_num" placeholder="请输入目标人数"></u-input>
			</u-form-item>
			<u-form-item class="form-item" label="首次购买桶数" labelWidth="120" prop="car_num">
				<u-input v-model="formData.car_num" placeholder="请输入首次购买桶数"></u-input>
			</u-form-item>
			<u-form-item class="form-item" label="奖励金额" labelWidth="120" prop="car_num">
				<u-input v-model="formData.car_num" placeholder="请输入奖励金额"></u-input>
			</u-form-item>
			<u-form-item class="form-item" label="说明" labelWidth="120" prop="car_num">
				<u-textarea v-model="formData.car_num" placeholder="请输入活动说明"></u-textarea>
			</u-form-item>
		</u-form>

		<view class="footer">
			<view class="btn-group">
				<u-button type="primary" size="large" block @click="submit()">提交</u-button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import request from '@/utils/request';
	import cache from '@/utils/cache';
	import util from '@/utils/util';
	import {
		ref,
		reactive,
		toRefs,
		inject,
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady,
		onPullDownRefresh,
		onReachBottom,
	} from '@dcloudio/uni-app';

	const state = reactive({
		title: '发布营销活动',
		themeColor: cache.get('themeColor'),
		imgHost: util.requestUrl(),
		activity_id: 0,
		formData: {}
	});

	const formRef = ref();
	const rules = ref([]);
	const imageList = ref([]);
	const extname = ref('jpg,jpeg,png,bmp,gif,tif,svg,webp');
	const imageStyles = ref({
		"width": '316rpx', // 边框宽度
		"height": '260rpx', // 边框高度
		"border": { // 如果为 Boolean 值，可以控制边框显示与否
			"color": "#909193", // 边框颜色
			"width": "1px", // 边框宽度
			"style": "solid", // 边框样式
		}
	});

	//在页面所有元素加载完成后执行（只执行一次）
	onLoad((opt) => {
		console.log('onLoad');
		if (opt.hasOwnProperty('activity_id')) {
			console.log('传递参数', opt.activity_id);
			state.activity_id = opt.activity_id;
			state.title = '编辑营销活动';
			getDetail();
		}
	});

	//在页面由不可见变为可见时执行（只要页面显示都会执行）
	onShow(() => {
		console.log('onShow');
	})

	//在页面解析完成之后执行
	onReady(() => {
		console.log('onReady');
	})

	onPullDownRefresh(() => {
		console.log('下拉刷新');
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1000);
	})

	onReachBottom(() => {
		console.log('触底加载更多');
	})

	function getDetail() {

	}

	function submit() {

	}

	// 选择图片
	function selectFile(res) {
		console.log('selectFile', res);

		// 上传
		for (let i = 0; i < res.tempFilePaths.length; i++) {
			upload(res.tempFilePaths[i]);
		}
	}

	// 删除照片
	function removeOk(res) {
		console.log('removeOk', res);
		state.formData.car_img = "";
		imageList.value = [];
	}

	// 图片上传
	function upload(file, type = 'marketing') {
		uni.uploadFile({
			url: util.requestUrl() + '/api/upload/uploadfile', // 开发者服务器接口地址
			filePath: file, // 要上传文件资源的路径
			name: 'file', // 文件对应的 key
			formData: {
				'type': type,
				'token': cache.get('M_LOGIN_TOKEN', false) || '',
				'role': cache.get('role', false) || 0,
			}, // 请求的 form data
			success: (res) => {
				const json = JSON.parse(res.data);
				if (json.code == 1) {
					const data = json.data;
					console.log('上传成功', data);
					util.showTip(data.originalName + '上传成功');
					state.formData.car_img = data.url;
					imageList.value = [{
						name: data.url,
						extname: data.fileType, // 文件类型，image/video/file
						url: data.url2,
					}];
				}
			},
			fail: (error) => {
				console.error('上传失败', error);
				// 处理上传失败的错误
				uni.showToast({
					title: '网络错误，请稍后再试！',
					icon: fail,
					duration: 2000
				});
			}
		});
	}

	function pageRoute(url) {
		uni.navigateTo({
			url
		});
	}

	function pageTabRoute(url) {
		uni.reLaunch({
			url
		});
	}

	const {
		title,
		themeColor,
		imgHost,
		activity_id,
		formData
	} = toRefs(state);
</script>

<style lang="scss">
	.marketing-form {
		padding-bottom: calc(100rpx + env(safe-area-inset-bottom));

		.form {
			padding: $m24;

			.form-item {
				@include f-between($align: center);
				background-color: #fff;
				margin-bottom: $m16;
				padding: 0 $m24;
				border-radius: 10rpx;
			}

			.upload-row {
				margin-top: $m12;
				margin-bottom: $m24;

				.tips {
					margin-bottom: $m12;
					// color: $tips-color;
				}
			}
		}

		.footer {
			position: fixed;
			/* 固定在底部 */
			bottom: 0;
			width: 100%;

			.btn-group {}
		}
	}
</style>